/* eslint-disable @typescript-eslint/no-shadow */
import Modal from 'antd/lib/modal/Modal';
import React, { useEffect, useRef, useState } from 'react';
import type { DayUseRateParams } from '@/services/seller';
import { dayUseRate } from '@/services/seller';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';

export interface UseRateProps {
  uId: string | number;
  userType: string | number;
  token: string;
  sid: string | number;
  visible: boolean;
  onCancel: (e: React.MouseEvent) => void;
}

export type SellerUseRateItem = {
  device_num: string; // "76"
  order_num: number; // 1
  real_amount: string; // "2.00"
  unit: string; // "2021-01-10"
};

const columns: ProColumns<SellerUseRateItem>[] = [
  {
    title: '日期',
    dataIndex: 'unit',
    search: false,
  },
  {
    title: '交易(元)',
    dataIndex: 'real_amount',
    search: false,
  },
  {
    title: '订单(笔)',
    dataIndex: 'order_num',
    search: false,
  },
  {
    title: '设备数量',
    dataIndex: 'device_num',
    search: false,
  },
  {
    title: '客单价',
    dataIndex: 'per_mount',
    search: false,
    renderText: (_, row) => {
      return `${(Number(row.real_amount) / row.order_num).toFixed(2)  }`;
    },
  },
  {
    title: '使用率(%)',
    dataIndex: 'per_use_rate',
    search: false,
    renderText: (_, row) => {
      return `${((Number(row.order_num) / Number(row.device_num)) * 100).toFixed(2)  }`;
    },
  },
  {
    title: '时间范围',
    dataIndex: 'time_range',
    valueType: 'dateRange',
    hideInTable: true,
  },
  {
    title: '设备类型',
    dataIndex: 'choose_type',
    valueType: 'select',
    hideInTable: true,
    initialValue: '充电线',
    valueEnum: {
      2: { text: '充电线' },
      1: { text: '充电宝' },
    },
  },
];

const UseRate: React.FC<UseRateProps> = (props) => {
  const { visible, onCancel, uId, userType, token, sid } = props;
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [type, setType] = useState(2); // 1 - 机柜； 2 - 充电线
  const [starttime, setStarttime] = useState<string | boolean>(false);
  const [endtime, setEndtime] = useState<string | boolean>(false);
  const [total, setTotal] = useState<string | number>(0);

  const ref = useRef<ActionType>();

  useEffect(() => {
    if (visible) {
      ref.current?.reload();
    }
  }, [visible]);

  return (
    <Modal
      width={1200}
      title="商家使用率"
      visible={visible}
      onOk={onCancel}
      onCancel={onCancel}
      okText="确定"
      cancelButtonProps={{
        style: {
          display: 'none',
        },
      }}
    >
      {visible ? (
        <ProTable
          actionRef={ref}
          rowKey="unit"
          scroll={{ x: 'max-content' }}
          columns={columns}
          request={async () => {
            const data: DayUseRateParams = {
              uId,
              userType,
              token,
              sid,
              limit,
              page,
              type,
              starttime: starttime as string,
              endtime: endtime as string,
            };
            return dayUseRate(data);
          }}
          postData={(res) => {
            //   console.log('【获取商户数据】', res);
            setTotal((res as any).count);
            return (res as any).list;
          }}
          beforeSearchSubmit={(params: any) => {
            if (params.choose_type) {
              setType(params.choose_type);
            }

            if (params.time_range) {
              setStarttime(params.time_range[0]);
              setEndtime(params.time_range[1]);
            } else {
              setStarttime(false);
              setEndtime(false);
            }

            return params;
          }}
          pagination={{
            pageSize: limit,
            total: total as number,
            onChange: (page) => {
              setPage(page);
            },
            onShowSizeChange: (_, size) => {
              setLimit(size);
            },
          }}
        ></ProTable>
      ) : (
        <></>
      )}
    </Modal>
  );
};

export default React.memo(UseRate);
